<template>
    <main class="page">
        <!-- 文本搜索功能块 -->
        <section class="block">
            <!-- 标题 -->
            <span class="title">Text Search</span>
            <!-- 查询条目输入框 -->
            <el-input
                v-model="text" 
                placeholder="Enter search contents here"
            />
            <!-- 文本搜索提交按钮 -->
            <SubmitButton method="text" :match="text"/>
        </section>
        <!-- 高级搜索功能块 -->
        <section class="block">
            <!-- 标题 -->
            <span class="title">Advanced Search</span>
            <!-- 匹配字段功能块 -->
            <div class="items">
                <!-- 字段名称 -->
                <span class="subtitle">Classification</span>
                <!-- 字段内容选择器 -->
                <el-select v-model="classification">
                    <el-option
                        v-for="item in ['','DNA','RNA','HYBRID']"
                        :key="item"
                        :label="item"
                        :value="item"
                    />
                </el-select>
                <!-- 字段名称 -->
                <span class="subtitle">Experimental Method</span>
                <!-- 字段内容选择器 -->
                <el-select v-model="experiment">
                    <el-option
                        v-for="item in ['','X-RAY','NMR','OTHER']"
                        :key="item"
                        :label="item"
                        :value="item"
                    />
                </el-select>
                <!-- 字段名称 -->
                <span class="subtitle">Ligands</span>
                <!-- 字段内容输入框 -->
                <el-input
                    v-model="ligands"
                    class="ligand"
                />
            </div>
            <!-- 高级搜索提交按钮 -->
            <SubmitButton method="advanced" :match="[classification,experiment,ligands]"/>
        </section>
        <!-- blast搜索功能块 -->
        <section class="block">
            <!-- 标题 -->
            <span class="title">BLAST Search</span>
            <!-- 搜索输入 -->
            <el-input
                v-model="seq" 
                placeholder="Enter sequences in FASTA format here"
                type="textarea"
                resize="none"
                :rows="10"
            />
            <!-- blast搜索提交按钮 -->
            <SubmitButton method="blast" :match="seq"/>
        </section>
    </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 导入提交按钮组件
import SubmitButton from '../components/SubmitButton.vue';

// 初始化状态-文本搜索输入、blast搜索输入、分类字段匹配内容、实验方法字段匹配内容、配体列表字段匹配内容
const text=ref('');
const seq=ref('');
const classification=ref('');
const experiment=ref('');
const ligands=ref('');
</script>

<style lang="scss" scoped>
/* 页面布局样式 */
.page{
    height:83vh;
    margin-top:2vh;
    margin-left:3vw;
    margin-right:3vw;
    width:92vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
}
/* 搜索功能块布局样式 */
.block{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
/* 功能块标题文本样式 */
.title{
    font-size:3.5vh;
    font-weight: bold;
    color:white;
}
/* 高级搜索匹配字段功能块布局 */
.items{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
/* 高级搜索字段名称布局样式 */
.subtitle{
    font-size:3vh;
    font-weight: bold;
    margin-left:1vw;
    margin-right:1vw;
}
/* 配体列表输入框宽度 */
.ligand{
    width:30vw;
}
</style>
